<template>
    <div class="login">
        <el-row>
            <el-col :span="8" class="login-left"> </el-col>
            <el-col :span="16" class="login-right">
                <!-- 手机号输入卡片 -->
                <el-card v-show="isInputMobile">
                    <div slot="header">
                        <span>登录飞书</span>
                    </div>

                    <el-tabs v-model="activeName">
                        <el-tab-pane label="手机号" name="first">
                            <!-- 手机号输入框 -->
                            <el-input
                                placeholder="请输入手机号"
                                :value="mobile"
                                @input="handleMobileInput"
                            >
                                <template slot="prepend">+ 86</template>
                            </el-input>

                            <!-- 下一步按钮 -->
                            <el-button type="primary" round @click="handleNext"
                                >下一步</el-button
                            >
                        </el-tab-pane>
                        <el-tab-pane label="邮箱" name="second"
                            >邮箱</el-tab-pane
                        >
                    </el-tabs>
                </el-card>

                <!-- 手机验证码输入框 -->
                <el-card v-show="!isInputMobile">
                    <div slot="header">
                        <!-- 返回按钮 -->
                        <el-row>
                            <el-link icon="el-icon-back" @click="goBack"
                                >返回</el-link
                            >
                        </el-row>

                        <h3>验证手机号码</h3>

                        <p>
                            请输入发送至 +86 {{ mobile }} 的 6
                            位验证码，有效期十分钟，如未收到，请尝试重新获取验证码。
                        </p>
                    </div>

                    <el-input
                        v-model="code"
                        placeholder="请输入 6 位验证码"
                    ></el-input>

                    <el-link
                        v-if="this.allowTime < 1"
                        @click.prevent="handleNext"
                        >重新获取验证码</el-link
                    >
                    <el-link v-else disabled
                        >{{ allowTime }} 秒后可重新获取验证码</el-link
                    >

                    <!-- 下一步按钮 -->
                    <el-button type="primary" round @click="handleLogin"
                        >下一步</el-button
                    >
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isInputMobile: true,
            mobile: "",
            code: "",
            activeName: "first",
            allowTime: 60,
            intervalId: 0,
        };
    },
    methods: {
        goBack() {
            this.isInputMobile = true;
            clearInterval(this.intervalId);
        },
        handleMobileInput(val) {
            let value = val.replace(/\D/g, "").substr(0, 11);
            let valueLen = value.length;

            if (valueLen <= 3) {
                this.mobile = value;
            }

            if (valueLen > 3 && valueLen <= 7) {
                this.mobile = `${value.substr(0, 3)} ${value.substr(3)}`;
                return;
            }

            if (valueLen > 7) {
                this.mobile = `${value.substr(0, 3)} ${value.substr(
                    3,
                    4
                )} ${value.substr(7)}`;
            }
        },
        async handleNext() {
            const mobile = this.mobile.replace(/\D/g, "").substr(0, 11);
            // 调用获取验证码接口
            const res = await this.$http.get(`/code/${mobile}`);
            // 防止 60 秒内，重复获取验证码
            if (res.code === 403 && res.data.create_time) {
                this.showTimer(res.data.create_time);
                this.isInputMobile = false;
                return;
            }
            // 其他错误情况提示
            if (res.code !== 201) {
                this.$notify.error({
                    title: res.message,
                });
                return;
            }
            // 从手机号输入框 => 验证码输出框
            this.$notify.success({ title: res.message });
            this.showTimer();
            this.isInputMobile = false;
        },
        async handleLogin() {
            const res = await this.$http.post("/login", {
                mobile: this.mobile.replace(/\D/g, "").substr(0, 11),
                code: this.code,
            });
            // 判断是否登录成功
            if (res.code !== 200) {
                this.$notify.error({
                    title: res.message,
                });
                return;
            }
            console.log("res", res);
            // 登录成功，保存用户登录状态
            window.sessionStorage.setItem("token", res.data.token);
            window.sessionStorage.setItem(
                "user",
                JSON.stringify(res.data.user)
            );
            // 权限菜单
            window.sessionStorage.setItem(
                "menu",
                JSON.stringify(res.data.menus)
            );
            // 跳转到后台页面
            this.$router.push("/dashboard");
        },
        showTimer(create_time) {
            if (create_time) {
                this.allowTime = Math.ceil(
                    (Date.parse(create_time) + 60000 - Date.now()) / 1000
                );
            } else {
                this.allowTime = 59;
            }
            // 设置定时器，显示倒计时效果
            this.intervalId = setInterval(() => {
                if (this.allowTime > 0) {
                    this.allowTime -= 1;
                } else {
                    clearInterval(this.intervalId);
                }
            }, 1000);
        },
    },
};
</script>

<style lang="less">
.login {
    height: 100%;

    .el-row {
        height: 100%;
    }

    &-left {
        height: 100%;
        background-color: #fff;
    }

    &-right {
        height: 100%;
        background-color: #eee;
        display: flex;
        justify-content: center;
        align-items: center;

        .el-card {
            width: 450px;
        }

        .el-button {
            margin-top: 15px;
            width: 100%;
        }

        .el-input {
            margin-bottom: 10px;
        }
    }
}
</style>
